<template>
  <div class="container" v-loading="loadingVisible">
    <div class="toolbar">
      <emoji-panel id="emoji_panel" v-show="emojiPanelVisible" v-on:select-emoticon="selectEmoticon"></emoji-panel>
      <a class="face" title="表情" @click="displayEmojiPanel" v-clickOutside="handleCloseEmojiPanel"></a>
      <el-upload
        class="upload"
        ref="fileUpload"
        :action="uploadFileUrl"
        :data="postFileData"
        :auto-upload="false"
        :headers="uploadRequestHeaders"
        :show-file-list="false"
        :on-change="handleFileOnChange"
        :before-upload="beforeFileUpload"
        :on-success="fileUploadSuccess">
        <a class="folder" title="文件"></a>
      </el-upload>  
      <el-upload
        class="upload"
        ref="imageUpload"
        :action="uploadImageUrl"
        :data="postImageData"
        :auto-upload="false"
        :headers="uploadRequestHeaders"
        :show-file-list="false"
        :on-change="handleImageOnChange"
        :before-upload="beforeImageUpload"
        :on-success="imageUploadSuccess">
        <a class="image" title="图片"></a>
      </el-upload>        
    </div>
    <div class="content-container">
      <textarea class="custom-textarea custom-textarea--emoji-picker" id="post_textbox" ref="message_content"
        autocomplete="off" spellcheck="true" placeholder="输入要发送的消息..." v-model="message" @keydown="onMessageContentEnterKeyDown"
        @keyup="ctrlButtonDown=false">
      </textarea>
    </div>
    <div class="send-button-container">
      <span>Ctrl+Enter换行</span>
      <el-button type="primary" size="small" @click="doSendMessage()" :disabled="sendButtonDisabled">发送</el-button>
    </div>
  </div>
</template>

<script>
import { saveMessage } from '@/api/mdp/im/message'
import seq from '@/common/js/sequence';//全局公共库
import config from '@/common/config';//全局公共库
import { mapGetters } from 'vuex'


const clickOutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回。
      if (el.contains(e.target)) {
        return false
      }
      // 展开的表情pannel，也返回不执行关闭操作。
      if(e.target.getAttribute('isEmoji') != null) {
        return false
      }
      // Emoji图标，也返回不执行关闭操作。
      if(e.target.getAttribute('type') != null && e.target.getAttribute('type') === 'emoji_icon') {
        return false
      }      
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleCloseEmojiPanel方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  },
}
export default {
  computed: { 
    ...mapGetters([
      'userInfo','token'
    ]),
  },
  data() {
    return {
      message: '',
      emojiPanelVisible: false,
      loadingVisible: false,
      sendButtonDisabled: true,
      ctrlButtonDown: false,
      postFileData: {
        archiveId: '',  
        branchId:'',
        categoryId:'im'
      },
      
      postImageData: {
        groupId: this.groupId,
        width: 300,
        height: 200, 
        branchId:'',
        categoryId:'im'
      },
      uploadFileUrl:config.getArcFilePath()+"/arc/file/upload",
      uploadImageUrl:config.getArcImagePath()+"/arc/image/upload",
      uploadRequestHeaders: {
        'Authorization': 'accessToken '+this.token
      }
    }
  },
  name: 'send-message',
  props: ['groupId', 'isPrichat','toUserid','toUsername','sendContent'],
  directives: { clickOutside },
  watch:{
    sendContent:function(sendContent){
      if(sendContent==null){
        this.message="";
      }else{
         this.message=sendContent;
      }
     
    }
  },
  methods: {
    doSendMessage() {
      if(this.message.trim() === '') {
        return
      } 
      var date=new Date();
      const newMessage = {
        msgId:seq.sn(),
        action:'newMessage',
        sendTime:date.getTime(),
        sendUsername:this.userInfo.username,
        sendUserid:this.userInfo.userid,
        groupId: this.groupId,
        msgType: this.isPrichat=='0'?'group':'prichat',
        sendContent: this.message.replace(new RegExp("\n", "gm"), "<br />")
      } 
      if(this.isPrichat=='1'){
        newMessage.toUserid=this.toUserid 
        newMessage.toUsername=this.toUsername
      }
        this.$emit('onMessageSent',newMessage) 
    },
    cheanMessage() {
      this.message=''
    },
    displayEmojiPanel() {
      this.emojiPanelVisible = !this.emojiPanelVisible
    },
    handleCloseEmojiPanel() {
      this.emojiPanelVisible = false
    },
    selectEmoticon(emoticon) {
      let textarea = this.$refs.message_content
      let pos = textarea.selectionStart
      let leftStr = this.message.substring(0, pos);
      let rightStr = this.message.substring(pos, this.message.length)
      this.message = leftStr + emoticon + rightStr
    },
    onMessageContentEnterKeyDown(e) {
      if(e.keyCode === 17) {
        this.ctrlButtonDown = true
        return
      }
      if(e.keyCode === 13) {
        if(this.ctrlButtonDown) {
          this.message += '\r\n'
        } else {
          this.doSendMessage()
        }
        e.preventDefault()
      }
    },
    beforeFileUpload(file) {  
      if(file.name.replace(/[\u0391-\uFFE5]/g, "aa").length > 64) {
        this.$message.error('文件名长度不能超过64!')
        return false
      }
      const isLt6M = file.size / 1024 / 1024 < 6;
      if (!isLt6M) {
        this.$message.error('文件大小不能超过 6MB!')
      }
      this.postFileData.groupId = this.groupId
      this.postFileData.size = file.size
      if(isLt6M) {
        this.loadingVisible = true
      }
      return isLt6M
    },
    fileUploadSuccess(res, file, fileList) {
      this.loadingVisible = false
      console.log(res);
      if(!res.tips.isOk) {
         this.$message.error(res.tips.msg)
        return 
      } 
      let fileExtension=res.data.fileSuffix
      if(fileExtension.indexOf(".")>=0){
        fileExtension=fileExtension.substring(fileExtension.indexOf(".")+1);
      }
      var date=new Date();
      const newMessage = {
        msgId:seq.sn(),
        action:'newMessage',
        sendTime:date.getTime(),
        sendUsername:this.userInfo.username,
        sendUserid:this.userInfo.userid,
        groupId: this.groupId,
        msgType: this.isPrichat=='0'?'group':'prichat',
        sendObject:'F',
        sendContent: {
          url:res.data.url,
          title:res.data.name,
          fileExtension:fileExtension
        }
      } 
      if(this.isPrichat=='1'){
        newMessage.toUserid=this.toUserid 
      }
        this.$emit('onMessageSent',newMessage)  
    },
    handleFileOnChange(file) {
      const fileName = file.name.toLowerCase()
      if (fileName.endsWith('png') || fileName.endsWith('jpeg') || fileName.endsWith('jpg') || fileName.endsWith('gif')) {
        let img = new Image()
        img.src = file.url
        let self = this
        img.onload = function() {
          self.postFileData.width = img.width
          self.postFileData.categoryId = 'im'
          self.postFileData.archiveId = self.groupId
          self.postFileData.branchId = self.userInfo.branchId
          console.log(self.$refs.fileUpload); 
          
          self.$refs.fileUpload.submit()
        }
      } else { 
          this.postFileData.categoryId = 'im' 
          this.postFileData.archiveId = this.groupId
          this.postFileData.branchId = this.userInfo.branchId  
        this.$refs.fileUpload.submit()
      }
    },
    beforeImageUpload(file) {  
      if(file.name.replace(/[\u0391-\uFFE5]/g, "aa").length > 64) {
        this.$message.error('文件名长度不能超过64!')
        return false
      }
      const isLt6M = file.size / 1024 / 1024 < 6;
      if (!isLt6M) {
        this.$message.error('文件大小不能超过 6MB!')
      }
      this.postFileData.groupId = this.groupId
      this.postFileData.size = file.size
      if(isLt6M) {
        this.loadingVisible = true
      }
      return isLt6M
    },
    imageUploadSuccess(res, file, fileList) {
      this.loadingVisible = false
      console.log(res);
      if(!res.tips.isOk) {
         this.$message.error(res.tips.msg)
        return 
      } 
      let fileExtension=res.data.fileSuffix
      if(fileExtension.indexOf(".")>=0){
        fileExtension=fileExtension.substring(fileExtension.indexOf(".")+1);
      }
      var date=new Date();
      const newMessage = {
        msgId:seq.sn(),
        action:'newMessage',
        sendTime:date.getTime(),
        sendUsername:this.userInfo.username,
        sendUserid:this.userInfo.userid,
        groupId: this.groupId,
        msgType: this.isPrichat=='0'?'group':'prichat',
        sendObject:'I',
        sendContent: {
          url:res.data.url,
          title:res.data.name,
          fileExtension:fileExtension,
          width:this.postImageData.width,
          height:this.postImageData.height
        }
      } 
      if(this.isPrichat=='1'){
        newMessage.toUserid=this.toUserid 
      }
        this.$emit('onMessageSent',newMessage)  
    },
    handleImageOnChange(file) {
      const fileName = file.name.toLowerCase()
      if (fileName.endsWith('png') || fileName.endsWith('jpeg') || fileName.endsWith('jpg') || fileName.endsWith('gif')) {
        let img = new Image()
        img.src = file.url
        let self = this
        img.onload = function() {
          self.postImageData.width = img.width
          self.postImageData.categoryId = 'im'
          self.postImageData.height = img.height
          self.postImageData.branchId = self.userInfo.branchId 
          
          self.$refs.imageUpload.submit()
        }
      } else { 
          this.postImageData.categoryId = 'im' 
          this.postImageData.branchId = this.userInfo.branchId  
        this.$refs.imageUpload.submit()
      }
    } 
  },
  updated() {
    this.uploadRequestHeaders.Authorization="accessToken "+this.token;
    this.$nextTick(() => {
      this.sendButtonDisabled = (this.message.trim() === '')
    })
  },
  mounted(){
    if(this.sendContent==null){
        this.message="";
      }else{
         this.message=sendContent;
      }
  },
  components: { 
    EmojiPanel: resolve => require(['./emojiPanel'], resolve)
  }
}
</script>

<style lang="scss" scoped>
.container {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 100%;
  z-index: 7;
  .toolbar {
    height: 25px;
    padding: 5px 20px;
    display: inline-block;
    border-top: solid 1px #DFDAD3;
    .face {
      width: 25px;
      height: 25px;
      background: url(../../../../assets/images/emoji.png) no-repeat;
      vertical-align: middle;
      float: left;
      cursor: pointer;
    }
    .upload {
      float: left;
    }
    .file-invisible {
      position: absolute;
      clip: rect(1px,1px,1px,1px);
    }
    .folder {
      margin-left: 8px;
      width: 25px;
      height: 25px;
      background: url(../../../../assets/images/folder.png) no-repeat;
      display: inline-block;
      vertical-align: middle;  
      cursor: pointer;
    }
    .image {
      margin-left: 8px;
      width: 25px;
      height: 25px; 
      background: url(../../../../assets/images/image.png) no-repeat; 
      display: inline-block;
      vertical-align: middle;  
      cursor: pointer;
    }
  }
  .content-container {
    overflow: hidden;
    display: inline-block;
    *zoom:1;
    *display: inline;
    padding: 0 35px 0 20px;
  }
  .send-button-container {
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding: 0 18px 0 0;
    span {
      color: #888;
      font-size: 12px;
      margin-left: 10px;
      margin-right: 7px;
    }
  }
}
.custom-textarea {
  margin-top: 20px;
  bottom: 0;
  width: 100%;
  max-height: 162px;
  overflow: hidden;
  padding: 8px 0 13px 15px;
  resize: none;
  font-size: 14px;
}
</style>


